<template>
  <div class="purchase_view">
    <!-- 添加或修改申请采购明细对话框 -->
    <el-button class="active" type="text" @click="handleAdd">新增明细</el-button>
    <el-dialog :visible.sync="open" title="学院申购" width="900px" append-to-body>
      <el-form ref="form" :model="form" label-width="190px" style="margin-top: -20px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="老师向学院申购(已完成签批)">
              <el-select v-model="form.instanceId" @change="getList" placeholder="请选择已签批流程">
                <el-option
                  v-for="item in instanceList"
                  :key="item.instanceId"
                  :label="item.flowName"
                  :value="item.instanceId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item >
                <el-checkbox v-model="form.isRemoved" @change="getList">显示已移除</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item style="margin-top: -10px" label="老师向学院申购危化品目录:"></el-form-item>
      </el-form>

        <el-table style="width: 100%; margin-bottom: 20px; margin-top: -15px" :data="dataList" >
         <el-table-column label="编号" align="center" prop="purchaseDetailId" width="60"/>
         <el-table-column label="申购工号" align="center" prop="applyTeacher"  :show-overflow-tooltip="true"/>
        <el-table-column label="名称"  prop="materialName" :show-overflow-tooltip="true"/>
		 <el-table-column label="Cas号" align="center" prop="casNo"  :show-overflow-tooltip="true"/>
         <el-table-column label="类别" align="center" prop="hazardousOpt" :formatter="kindsFormat" width="80" :show-overflow-tooltip="true"/>
         <el-table-column label="数量" align="center" prop="quantity" width="60"/>
         <el-table-column label="单位" align="center" prop="unitOpt" :formatter="unitOptFormat" width="60"/>
         <el-table-column label="厂家" prop="recommendedManufacturer" :show-overflow-tooltip="true"/>
         <el-table-column label="货号" align="center" prop="orderCode" width="60"/>
         <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" width="100"/>
         <el-table-column label="操作" align="center" width="60">
           <template slot-scope="scope">
               <el-button v-if="!form.isRemoved && scope.row.purchaseId"
                 size="mini"
                 class="active"
                 type="text"
                 style="margin-left: 5px"
                 @click="handleRemove(scope.row)"
                 v-hasPermi="['labdata:casInventory:edit']"
               >移除</el-button>
               <el-button
                 size="mini"
                 class="active"
                 type="text"
                 style="margin-left: 5px"
                 v-if="form.isRemoved && scope.row.purchaseId"
                 @click="handleRecover(scope.row)"
                 v-hasPermi="['labdata:casInventory:edit']"
               >恢复</el-button>
           </template>
           </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
        <el-button v-if="isCanSave" type="primary" @click="submitForm" v-hasPermi="['labdata:casInventory:edit']">保存</el-button>
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getAllRestrictedKinds} from "@/api/labdata/cylindersType";
import {listTeacherApply,academyUpdate} from "@/api/labdanger/purchase";
import {listByinstance, updateRemoved} from "@/api/labdanger/purchaseDet";
export default {
  name: "CollegeDialog",
  data() {
    return {
      isCanSave:false,
      instanceList:[],
      dataList:[],
      // 类别字典
      kindsOptions: [],
      // 单位字典
      unitOptOptions: [],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      open: false,
      // 表单参数
      form: {
        isRemoved:false,
      },
      queryParams: {
          pageNum: 1,
          pageSize: 10
      },
    };
  },
  props:{
    purchaseId:Number,
  },
  watch:{
    purchaseId:function(val){
      purchaseId = val;
      this.getTeacherApplys();
    }
  },
  created() {
    this.getTeacherApplys();
    this. getAllKinds();
    this.getDicts("unitOpt").then(response => {
         this.unitOptOptions = response.data;
      });
  },
  methods: {
    getAllKinds(){
      getAllRestrictedKinds().then(response => {
        this.kindsOptions = response.data;
      });
    },
    kindsFormat(row, column){
      for(let i=0; i<this.kindsOptions.length;i++){
        if(this.kindsOptions[i].kindsId == row.hazardousOpt){
          return this.kindsOptions[i].name;
        }
      }
      return '';
    },
    // 单位字典翻译
    unitOptFormat(row, column) {
      return this.selectDictLabel(this.unitOptOptions, row.unitOpt);
    },
    getTeacherApplys(){
      listTeacherApply(this.purchaseId).then(response => {
        this.instanceList = response.data;
      });
    },
    getList(){
      listByinstance(
      {
        instanceId:this.form.instanceId,
        isRemoved:this.form.isRemoved?1:0,
      }).then( response => {
        this.dataList = response.data;
        if(this.dataList && this.dataList.length>0 &&this.dataList[0].purchaseId==null){
          this.isCanSave = true;
        }else{
          this.isCanSave = false;
        }
      });
    },
    handleRemove(row){
      updateRemoved({
        purchaseDetailId:row.purchaseDetailId,
        isRemoved:1
      }).then(response =>{
        this.msgSuccess("移除成功");
        this.getList();
        this.$emit("list");
      });
    },
    handleRecover(row){
      updateRemoved({
        purchaseDetailId:row.purchaseDetailId,
        isRemoved:0
      }).then(response =>{
        this.msgSuccess("恢复成功");
        this.getList();
        this.$emit("list");
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
     // this.$emit("list");
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
      this.open = false
    },
    submitForm() {
      academyUpdate({
        purchaseId:this.purchaseId,
        instanceId:this.form.instanceId,
      }).then(response => {
        this.msgSuccess("保存成功");
        this.getList();
        this.$emit("list");
      });
    }
  }
};
</script>

<style scoped>
    .el-button.active{
    text-decoration: underline;
    color: #0000ee;
    margin-left: 15px;
  }
  .dialog-footer {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
  }
</style>
